<template>
    <view>
        <!-- 自定义导航栏 -->
        <view class="navBarBox">
            <!-- 状态栏占位 -->
            <view :style="{ paddingTop: statusBarHeight + 'px' }"></view>
            <!-- 真正的导航栏内容 -->
            <view class="navBar">
                <view class="fanhui" @click="fanHui">
                    <image class="zjt" src="/static/fanhui.png" mode=""></image>
                </view>
                <view class="grzx">救援记录</view>
            </view>
        </view>
        <view class="order-list">
            <view v-for="(order, index) in orderData" :key="index" class="order-item">
                <view class="item-top">
                    <view class="order-type">{{ order.type }}</view>
                    <view class="order-date">{{ order.date }}</view>
                </view>
                <view class="order-info">
                    <view class="info-item">
                        <text>订单编号：</text>
                        <text class="item-font">{{ order.orderNumber }}</text>
                    </view>
                    <view class="info-item" v-if="order.type === '拖车'">
                        <text>起点：</text>
                        <text class="item-font">{{ order.start }}</text>
                    </view>
                    <view class="info-item" v-if="order.type === '拖车'">
                        <text>终点：</text>
                        <text class="item-font">{{ order.end }}</text>
                    </view>
                    <view class="info-item" v-else>
                        <text>位置：</text>
                        <text class="item-font">{{ order.location }}</text>
                    </view>
                    <view class="info-item">
                        <text>车牌：</text>
                        <text class="item-font">{{ order.licensePlate }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 定义响应式数据
const statusBarHeight = ref(0);
const orderData = ref([
    {
        type: '拖车',
        date: '2025-03-01',
        orderNumber: '98321666668',
        location: '郑州市金水区研发路与渠东路交叉口东140米',
        licensePlate: '奔驰S680/豫A88888',
        start: '郑州市金水区研发路与渠东路交叉口东140米',
        end: '郑州市金水区宝瑞路108号'
    },
    {
        type: '搭电',
        date: '2025-02-15',
        orderNumber: '98321235467',
        location: '郑州市金水区沃德花园8号楼',
        licensePlate: '奔驰S680/豫A88888',
        start: null,
        end: null
    },
    {
        type: '换胎',
        date: '2025-02-07',
        orderNumber: '98321200066',
        location: '郑州市金水区研发路与渠东路交叉口东140米',
        licensePlate: '奔驰S680/豫A88888',
        start: null,
        end: null
    }
]);

// 生命周期钩子，在组件挂载后执行
onMounted(() => {
    // 获取手机状态栏高度
    statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];
});

// 返回上一页的方法
const fanHui = () => {
    uni.navigateBack({
        delta: 1
    });
};
</script>

<style scoped>
.navBarBox {
    background-size: contain;
    background-color: #fff;
    color: #000000;
    height: 180rpx;
}

.navBar {
    display: flex;
    justify-content: space-between;
    padding: 3rpx 20rpx;
    padding-bottom: 8rpx;
}

.navBarBox .navBar .zjt {
    width: 50rpx;
    height: 50rpx;
    margin: 20rpx 0 40rpx;
}

.navBarBox .navBar .grzx {
    margin: 20rpx 0 40rpx;
    font-size: 36rpx;
    position: absolute;
    right: 310rpx;
}

.order-list {
    padding: 15px;
    position: relative;
    bottom: 260rpx;
    /* border: #000000 3px solid; */
    margin-top: 250rpx;
}

.order-item {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
}

.item-top {
    display: flex;
    border-bottom: 6rpx solid #F7F7F7;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
}

.order-type {
    font-size: 32rpx;
    font-weight: bold;
    color: #000000;
}

.order-date {
    font-size: 14px;
    color: #999;
}

.info-item {
    margin-top: 15rpx;
}

.item-font {
    color: #808080;
}
</style>